<!-- 权限管理 -->
<template>
  <div class="app-container">
    <div>
      <div>
        <el-input v-model="searchForm.name" style="width: 200px; margin: 0 10px 0 0" placeholder="name" clearable />
        <el-input v-model="searchForm.email" style="width: 200px; margin: 0 10px 0 0" placeholder="email" clearable />
        <el-select v-model="searchForm.roles" placeholder="roles" clearable>
          <el-option label="user" value="user" />
          <el-option label="admin" value="admin" />
          <el-option label="super-admin" value="super-admin" />
        </el-select>
        <div class="addButton">
          <el-button size="mini" type="primary" @click="getUserList(1)">查询</el-button>
          <el-button v-if="isSA" size="mini" type="primary" @click="addAdmin">新增管理员</el-button>
        </div>
      </div>
    </div>
    <el-table
      v-loading="isLoading"
      :data="tableData.list"
      style="width: 100%"
    >
      <el-table-column
        prop="id"
        label="id"
        width="320"
      />
      <el-table-column
        prop="name"
        label="name"
      />
      <el-table-column
        prop="email"
        label="邮箱"
      />
      <!-- <el-table-column
        prop="password"
        label="密码"
      /> -->
      <el-table-column
        prop="roles"
        label="角色"
      />
      <el-table-column
        width="360"
        prop="createAt"
        label="创建于"
      >
        <template slot-scope="scope">
          {{ new Date(scope.row.createAt) }}
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="pagination"
      layout="prev, pager, next"
      :total="tableData.total"
      @current-change="getUserList"
      @prev-click="getUserList"
      @next-click="getUserList"
    />
    <add-admin-dialog ref="dialogInstance" />
  </div>
</template>

<script>
import addAdminDialog from './addAdminDialog'
export default {
  name: 'Auth',
  components: {
    addAdminDialog
  },
  data() {
    return {
      isSA: false,
      isLoading: false,
      searchForm: {
        total: 10,
        pagination: 1
      },
      tableData: {}
    }
  },
  mounted() {
    this.getUserList()
    console.log(this.$store)
    this.isSA = this.$store.state.user.roles === 'super-admin'
  },
  methods: {
    addAdmin() {
      this.$refs.dialogInstance.show()
    },
    getUserList(page) {
      this.isLoading = true
      this.request({
        url: '/users/user-list',
        method: 'get',
        params: {
          name: this.searchForm.name,
          email: this.searchForm.email,
          roles: this.searchForm.roles,
          total: this.searchForm.total,
          pagination: page || this.searchForm.pagination || 1
        }
      }).then(res => {
        this.tableData = res.data
      }).finally(() => {
        this.isLoading = false
      })
    }
  }
}
</script>
<style lang='scss' scoped>
.addButton {
  position: absolute;
  top: 25px;
  right: 20px;
  z-index: 1000;
}

.pagination {
  margin: 10px 0;
  float: right;
}

</style>
